<template>
  <view class="container">
    <u-navbar title="添加商品" title-size="36"></u-navbar>
    <view class="page-body">
      <view class="wrapper">
        <view class="toolbar" style="overflow-y: auto">
          <!--          插入图片-->
          <view @tap="insertImage">
            <u-icon class="iconfont" name="/static/img/tp2.png" size="50"></u-icon>
          </view>
          <!--          H1标题-->
          <view>
            <u-icon
              class="iconfont"
              @tap="format('header', 1)"
              name="/static/img/H12.png"
              size="50"
            ></u-icon>
          </view>
          <view>
            <u-icon
              class="iconfont"
              @tap="format('header', 2)"
              name="/static/img/H22.png"
              size="50"
            ></u-icon>
          </view>

          <view>
            <u-icon
              class="iconfont"
              @tap="format('bold', 1)"
              :name="formats.bold ? `/static/img/B2.png` : `/static/img/B.png`"
              size="50"
            ></u-icon>
          </view>

          <view>
            <u-icon
              class="iconfont"
              @tap="format('underline', 1)"
              :name="formats.underline ? `/static/img/U2.png` : `/static/img/U.png`"
              size="50"
            ></u-icon>
          </view>

          <view>
            <u-icon
              class="iconfont"
              @tap="format('italic', 1)"
              :name="formats.italic ? `/static/img/I2.png` : `/static/img/点列表.png`"
              size="50"
            ></u-icon>
          </view>

          <view>
            <u-icon
              class="iconfont"
              @tap="format('list', 'bullet')"
              :name="
                formats.list == 'bullet' ? `/static/img/点列表2.png` : `/static/img/点列表.png`
              "
              size="50"
            ></u-icon>
          </view>
          <view>
            <u-icon
              class="iconfont"
              @tap="format('list', 'ordered')"
              :name="
                formats.list == 'ordered' ? `/static/img/数字列表2.png` : `/static/img/数字列表.png`
              "
              size="50"
            ></u-icon>
          </view>

          <!--          <view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"-->
          <!--                data-name="strike"></view>-->
          <!-- #ifndef MP-BAIDU -->

          <!--    <view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
                data-name="list" data-value="ordered"></view> -->

          <!--          <view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
                data-name="align" data-value="left"></view> -->
          <!-- #endif -->
          <!--         <view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
                data-name="align" data-value="center"></view> -->
          <!--          <view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
                data-name="align" data-value="right"></view> -->
          <!--          <view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"-->
          <!--                data-name="align" data-value="justify"></view>-->
          <!-- #ifndef MP-BAIDU -->
          <!--          <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"-->
          <!--                data-name="lineHeight" data-value="2"></view>-->
          <!--          <view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"-->
          <!--                data-name="letterSpacing" data-value="2em"></view>-->
          <!--          <view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"-->
          <!--                data-name="marginTop" data-value="20px"></view>-->
          <!--          <view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"-->
          <!--                data-name="marginBottom" data-value="20px"></view>-->
          <!-- #endif -->

          <!--          <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>-->

          <!-- #ifndef MP-BAIDU -->
          <!--          <view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"-->
          <!--                data-name="fontFamily" data-value="Pacifico"></view>-->
          <!--          <view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"-->
          <!--                data-name="fontSize" data-value="24px"></view>-->
          <!-- #endif -->
          <!--          <view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"-->
          <!--                data-name="color" data-value="#0000ff"></view>-->
          <!--          <view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"-->
          <!--                class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>-->
          <!--          <view class="iconfont icon-date" @tap="insertDate"></view>-->
          <!--          <view class="iconfont icon&#45;&#45;checklist" data-name="list" data-value="check"></view>-->

          <!--          <view class="iconfont icon-undo" @tap="undo"></view>-->
          <!--          <view class="iconfont icon-redo" @tap="redo"></view>-->

          <!--          <view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>-->
          <!--          <view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>-->
          <!--          <view class="iconfont icon-fengexian" @tap="insertDivider"></view>-->

          <!--          <view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"-->
          <!--                data-name="script" data-value="sub"></view>-->
          <!--          <view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"-->
          <!--                data-name="script" data-value="super"></view>-->

          <!--          <view class="iconfont icon-shanchu" @tap="clear"></view>-->

          <!--          <view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"-->
          <!--                data-name="direction" data-value="rtl"></view>-->
        </view>

        <view class="editor-wrapper">
          <editor
            id="editor"
            :value="content"
            class="ql-container"
            placeholder="请输入简介信息..."
            show-img-size
            show-img-toolbar
            show-img-resize
            @statuschange="onStatusChange"
            :read-only="readOnly"
            @ready="onEditorReady"
          >
          </editor>
        </view>
      </view>
      <view class="bottom_button">
        <view @tap.stop="clear">重置</view>
        <view @tap.stop="submit">保存</view>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadFiles } from '@/common/upload.js'

const Default = {
  throttle(fn, wait = 1000) {
    let task = null
    return function () {
      if (!task) {
        task = setTimeout(() => {
          task = null
          fn.apply(this, arguments)
        }, wait)
      }
    }
  }
}

export default {
  data() {
    return {
      readOnly: false,
      formats: {},
      //富文本内容
      RichTextContent: null,
      content: ''
    }
  },
  onLoad(options) {
    console.log(options.description)
    setTimeout(() => {
      uni
        .createSelectorQuery()
        .select('#editor')
        .context((res) => {
          console.log(options.description)
          res.context.setContents({
            html: decodeURIComponent(options.description) // 需要回显的内容
          })
        })
        .exec()
    }, 800)
  },
  methods: {
    submit: Default.throttle(function () {
      console.log(this.readOnly)
      this.editorCtx.getContents({
        success: (res) => {
          this.RichTextContent = res.html
          console.log(res.html)
          uni.$emit('rich', res.html)
          uni.navigateBack()
          // uni.showToast({
          //   title:'上传成功！',
          //   success:(result)=>{
          //     setTimeout(()=>{
          //         uni.$emit('RICH_TEXT_DATA',this.RichTextContent);
          //         uni.navigateBack();
          //     },200)
          //   }
          // })
        }
      })
    }, 1000),
    readOnlyChange() {
      this.readOnly = !this.readOnly
    },
    onEditorReady() {
      // #ifdef MP-BAIDU
      this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor')
      console.log(this.editorCtx)
      // #endif

      // #ifdef APP-PLUS || MP-WEIXIN || H5
      uni
        .createSelectorQuery()
        .select('#editor')
        .context((res) => {
          this.editorCtx = res.context
        })
        .exec()
      // #endif
    },
    undo() {
      this.editorCtx.undo()
    },
    redo() {
      this.editorCtx.redo()
    },
    format(name, value) {
      //    let {
      //      name,
      //      value
      //    } = e.target.dataset
      // console.log('format', e)
      //    if (!name) return
      // console.log('format', name, value)
      this.editorCtx.format(name, value)
    },
    onStatusChange(e) {
      const formats = e.detail
      this.formats = formats
    },
    insertDivider() {
      this.editorCtx.insertDivider({
        success: function () {
          console.log('insert divider success')
        }
      })
    },
    clear() {
      uni.showModal({
        title: '清空编辑器',
        content: '确定清空编辑器全部内容？',
        success: (res) => {
          if (res.confirm) {
            this.editorCtx.clear({
              success: function (res) {
                console.log('clear success')
              }
            })
          }
        }
      })
    },
    removeFormat() {
      this.editorCtx.removeFormat()
    },
    insertDate() {
      const date = new Date()
      const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
      this.editorCtx.insertText({
        text: formatDate
      })
    },
    insertImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          uploadFiles(res.tempFilePaths[0]).then((res) => {
            this.editorCtx.insertImage({
              src: res.data,
              alt: '图像',
              success: function () {
                console.log('insert image success')
              }
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.bottom_button {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  view {
    width: 50%;
    color: #f2f2f2;
    text-align: center;
    background-color: #2d93fd;
    padding: 24rpx 0;
  }
  :first-child {
    background-color: #e7e7e7;
    color: #333333;
  }
}

.page-body {
  /*height: calc(100vh - var(--window-top) - var(--status-bar-height));*/
  min-height: 100vh;
}

.wrapper {
  height: 100%;
}

.editor-wrapper {
  height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);
  background: #fff;
}

.iconfont {
  display: inline-block;
  padding: 8px 8px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 20px;
}

.toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  display: flex;
  justify-content: space-around;
  padding: 20rpx 20rpx 42rpx;
  background-color: #f6f6f6;
}

.ql-container {
  box-sizing: border-box;
  padding: 12px 15px;
  width: 100%;
  min-height: 30vh;
  height: 100%;
  /*margin-top: 20px;*/
  font-size: 16px;
  line-height: 1.5;
}

.ql-active {
  color: #06c;
}
</style>
